<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.title{
				margin: 0 auto;
				width: 500px;
				height: 40px;
				text-align: center;
				line-height: 40px;
				background-color: burlywood;
				margin-top: 50px;
			}
			.content{
				width: 500px;
				height: 400px;
				background-color: rosybrown;
				margin: 0 auto;
				
			}
			.content_left{
				width: 300px;
				height: 400px;
				background-color: darkgray;
				float: left;
			}
			.content_right{
				margin-left: 20px;
				width:180px;
				height: 400px;
				background-color: darkgrey;
				float: right;
			}
			.item{
				width: 90px;
				height: 40px;
				text-align: center;
				line-height: 40px;
				float: left;
				margin: 5px;
				background-color: burlywood;
			}
			.content_right .item{
				width: 80px;
			}
		</style>
	</head>
	<body>
		<div class="title">
			<h2>
				点名器
			</h2>
		</div>
		<div class="content">
			<div class="content_left">
				<div class="item">何星</div>
				<div class="item">唐友松</div>
				<div class="item">王羿丹</div>
				<div class="item">01</div>
				<div class="item">02</div>
				<div class="item">03</div>
				<div class="item">04</div>
				<div class="item">05</div>
				<div class="item">06</div>
				<div class="item">07</div>
				<div class="item">08</div>
				<div class="item">09</div>
				<div class="item">10</div>
			</div>
			<div class="content_right">
				
			</div>
		</div>
	</body>
	<script type="text/javascript">
		var items = document.querySelectorAll(".content_left .item");
		var content_right = document.querySelector(".content_right");
		var outs = [];
		
		for (var i=0;i<items.length;i++) {
			items[i].onclick = function(){
				this.style.backgroundColor = "green";
				outs.push(this.innerText);
				showstu();
			}
		}
		
		
		function showstu(){
			var str = "";
			for (var i=0;i<outs.length;i++) { 
				str += "<div class='item'>"+outs[i]+"</div>" ;
			}
			content_right.innerHTML = str;
			
		}
		
	</script>
</html>
